<template>

    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>


    <!-- 搜索区域 -->

    <div style="border: 1px solid black; margin: 20px; padding: 15px;">

        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="操作时间:">
                <el-date-picker v-model="searchForm.CreateTime" value-format="YYYY-MM-DD" type="date" placeholder="选择时间"
                    clearable />


            </el-form-item>
            <el-form-item label="用户名:">
                <el-input v-model="searchForm.UserName" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 表格区域 -->
    <div style="border: 1px solid black; margin: 20px; padding: 15px;">
        <el-table :data="tableData" style="width: 100%">

            <el-table-column label="序号" type="index" width="80" />
            <el-table-column prop="id" label="日志编号" width="140" />
            <!-- <el-table-column prop="createTime" label="操作时间" width="250">
                <template v-slot="scope">
                    {{ moment(scope.row.CreateTime).format('yyyy-MM-DD HH:MM:ss') }}
                </template>
</el-table-column> -->
            <el-table-column prop="createTime" :formatter="dateFormat" label="操作时间" width="250" />

            <el-table-column prop="createName" label="操作人" width="120" />
            <el-table-column prop="logContent" label="日志内容" width="300" />
            >
            <!-- <el-table-column fixed="right" label="操作" min-width="120">
                <template #default>
                    <el-button link type="primary" @click="handleClick">
                        编辑
                    </el-button>
                    <el-button link type="primary">删除</el-button>
                </template>
</el-table-column> -->
        </el-table>
        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
            :page-sizes="[2, 3, 4, 5]" :disabled="disabled" :background="true"
            layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />

    </div>
    <!-- 分页区域 -->

</template>

<script setup ts>
import axios from 'axios';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';


const searchForm = reactive({

    CreateTime: '',
    UserName: ''
})


//查询方法
const getData = () => {
    axios.get('http://localhost:5015/api/Log/GetLog'
        , {
            params: {
                CreateTime: searchForm.CreateTime,
                UserName: searchForm.UserName,
                PageIndex: page.PageIndex,
                PageSize: page.PageSize
            }
        }).then(res => {
            //
            tableData.value = res.data.items
            page.totalCount = res.data.totalCount
            page.totalPage = res.data.totalPage
        })
};

//格式化时间
const dateFormat = (row) => {
    console.log(row)
    return moment(row.createTime).format("yyyy年MM月DD日 HH:MM:ss");
}

//定义表格数据
const tableData = ref([])

const page = reactive({
    PageIndex: 1,
    PageSize: 2,
    totalCount: 0,
    totalPage: 0
});


watch(page, () => {
    getData();
})


onMounted(() => {
    getData();
});
</script>